import styles from './index.module.scss'
import cm from 'classnames'
import { useWindowWidth } from '@/utils/hooks'
import { useMemo, useState } from 'react'
import chunk from 'lodash-es/chunk'
import HFilmList from '@c/h-film-list'

const Index = props => {
  const { list } = props
  const { count } = useWindowWidth()
  const [current, setCurrent] = useState(0)
  const dataArr = useMemo(() => {
    const res = chunk(list, count)
    setCurrent(res.length < current + 1 ? 0 : current)
    return res
  }, [list, count, current])

  const next = () => {
    current < dataArr.length - 1 && setCurrent(current + 1)
  }
  const prev = () => {
    current && setCurrent(current - 1)
  }

  return (
    <div className={cm(styles.main, styles.mainPhone)}>
      <div className={styles.titleBox}>
        <h2>演员作品</h2>
        <div className={cm(styles.switch, 'hideWhenPhone')}>
          <img
            loading="lazy"
            src="/images/switch.png"
            alt="切换"
            className={cm(styles.switchPrev, current === 0 ? styles.switchNot : '')}
            onClick={prev}
          />
          <span>{current + 1}</span>
          <img
            loading="lazy"
            src="/images/switch.png"
            alt="切换"
            className={cm(current >= dataArr.length - 1 ? styles.switchNot : '')}
            onClick={next}
          />
        </div>
      </div>
      <HFilmList
        className={cm(styles.left, 'hideWhenPhone')}
        hideCollect
        showTitle={false}
        data={{ cards: dataArr[current] }}
      />
      <HFilmList className={cm(styles.left, 'hideWhenPc')} hideCollect showTitle={false} data={{ cards: list }} />
    </div>
  )
}

export default Index
